function getRandomToken() {
    // E.g. 8 * 32 = 256 bits token
    var randomPool = new Uint8Array(32);
    crypto.getRandomValues(randomPool);
    var hex = '';
    for (var i = 0; i < randomPool.length; ++i) {
        hex += randomPool[i].toString(16);
    }
    // E.g. db18458e2782b2b77e36769c569e263a53885a9944dd0a861e5064eac16f1a
    return hex;
}
var socket = io.connect('http://localhost:8088');
socket.emit('join',getRandomToken());
var CommentBox = React.createClass({
    handelSubmit: function(data){
        socket.emit('reciver',data);
    },
    getInitialState: function(){
        return {
            data: []
        };
    },
    componentDidMount: function(){
        socket.on('message',function(data){
            var arr = this.state.data;
            arr.push(data);
            this.setState({list: arr});
            
        }.bind(this));
    },
    render: function(){
        return (
             <div className="wrap am-g">
                <div className="am-u-sm-6">
                    <CommentForm submitHandel={this.handelSubmit} />
                </div>
                <div className="am-u-sm-6 commentList">
                    <CommentList data={this.state.data} />
                </div>
            </div>
        );
    }
});

var CommentForm = React.createClass({
    getInitialState: function(){
        return {
            ro: ''
        }
    },
    handelBlur: function(ev){
        if(ev.target.value != ''){
            this.setState({ro: 'readonly'});
        }
    },
    submit: function(ev){
        ev.preventDefault();
        var name = React.findDOMNode(this.refs.author).value,
            content = React.findDOMNode(this.refs.content).value;
        if(name == '' || content == ''){
            alert('内容不能为空');
            return;
        }
        this.props.submitHandel({
            'author': name,
            'content': content,
            'time': /\d{4}\s.*?\s/.exec(new Date())[0]
        })
        React.findDOMNode(this.refs.content).value = '';
    },
    render: function(){
        return (
            <form className="am-form am-form-horizontal am-margin-top am-margin-top-lg" onSubmit={this.submit}>
                <div className="am-form-group">
                    <label htmlFor="doc-ipt-3" className="am-u-sm-2 am-form-label">大名</label>
                    <div className="am-u-sm-10">
                        <input type="text" id="doc-ipt-3" placeholder="输入你的大名" ref="author" readOnly={this.state.ro} onBlur={this.handelBlur} />
                    </div>
                </div>
                <div className="am-form-group">
                    <label htmlFor="doc-ta-1" className="am-u-sm-2 am-form-label">内容</label>
                    <div className="am-u-sm-10">
                        <textarea className="" rows="5" id="doc-ta-1" ref="content"></textarea>
                    </div>
                </div>
                <div className="am-form-group">
                    <div className="am-u-sm-10 am-u-sm-offset-2">
                        <button type="submit" className="am-btn am-btn-default" ref="submit">提交内容</button>
                    </div>
                </div>
            </form>
        );
    }
});

var CommentList = React.createClass({
    render: function(){
        return (
            <div className="am-list-news am-list-news-default">
                <div className="am-list-news-hd am-cf">
                    <a href="javascript:;">
                        <h2>xx聊天室</h2>
                    </a>
                </div>
                <div className="am-list-news-bd">
                    <ul className="am-list">
                        {
                            this.props.data.length ? 
                            this.props.data.map(function(item){
                                return (
                                    <li className="am-g am-list-item-dated">
                                        <a href="javascript:;" className="am-list-item-hd ">{item.author}：{item.content}</a>
                                        <span className="am-list-date">{item.time}</span>
                                    </li>
                                );
                            })
                            :
                            <li className="am-g am-list-item-dated">
                                <a href="javascript:;" className="am-list-item-hd ">暂时没有内容...</a>
                            </li>
                        }
                    </ul>
                </div>
            </div>
        );
    }
});
React.render(<CommentBox  />,document.body);